<template>
  <div>
    <div class="c-bg-white c-pt26 c-pb32 c-ph24 c-br-tr16 c-br-tl16">
      <div>
        <template v-if="packageList.length > 0">
          <div class="c-fs24 c-fc-xblack">相关知识套餐</div>
          <div class="c-flex-row c-pt20" @click="clickPackageItem(item.cId)" v-for="(item,index) in packageList" :key="index">
            <div class="c-ww210 c-hh140 c-text-hidden c-p c-br8">
              <img class="c-w100 imgCloseBig c-br8" :src="$addXossFilter(item.cover, require('../../../assets/defult270.png'))" />
              <img v-if="item.payType == 2 && item.svipDiscount==0 && item.vipDiscount!=0" src="@/assets/i/wap/course/svipfree5.png" alt="" class="c-pa c-p-t0 c-p-l0 c-ww60 c-pz1" />
              <img v-else-if="item.payType == 2 && item.vipDiscount==0" src="@/assets/i/wap/course/vipfree5.png" alt="" class="c-pa c-p-t0 c-p-l0 c-ww60 c-pz1" />
            </div>
            <div class="c-flex-column c-pl20 c-flex-grow1 c-w0 c-pv4 c-justify-sb c-pb20" :class="index == packageList.length - 1 ? '': 'c-bd-b1'">
              <div class="c-fs24 c-text-ellipsis2 c-hh100">{{item.name}}</div>
              <div class="c-flex-row c-aligni-center c-justify-sb">
                <div class="c-fs20 c-fc-gray" v-if="item.price && item.payType == 2">{{item.sales | formatNumber}}{{ !$isWxAppIos() ? '人已购买' : '人观看' }}</div>
                <div class="c-fs20 c-fc-gray" v-else>{{(item.visits ? item.visits : item.clicks) | formatNumber}}人观看</div>
                <div class="theme-fc c-fs24">
                  <span v-if="item.price && item.payType == 2">{{'￥' | iosPriceFilter}}</span>
                  <span v-if="item.payType != 3">{{item.price | moneyStr}}</span>
                  <span v-else-if="item.payType == 3">加密</span>
                </div>
              </div>
            </div>
          </div>
          <div class="c-pv20 c-textAlign-c c-fc-gray c-fs24" @click="getRelatePackage(2)" v-if="is_page_package">
            加载更多&nbsp;>
          </div>
        </template>
        <template v-if="examList.length > 0">
          <div class="c-fs24 c-fc-xblack">相关测评</div>
          <div class="c-flex-row c-pt20" @click="clickExaminationItem(item.topicId)" v-for="(item,index) in examList" :key="index">
            <div class="c-ww210 c-hh140 c-text-hidden c-p c-br8">
              <img class="c-w100 imgCloseBig c-br8" :src="$addXossFilter(item.avatar, require('../../../assets/defult270.png'))" />
              <img v-if="item.payType == 2 && item.svipDiscount==0 && item.vipDiscount!=0" src="@/assets/i/wap/course/svipfree5.png" alt="" class="c-pa c-p-t0 c-p-l0 c-ww60 c-pz1" />
              <img v-else-if="item.payType == 2 && item.vipDiscount==0" src="@/assets/i/wap/course/vipfree5.png" alt="" class="c-pa c-p-t0 c-p-l0 c-ww60 c-pz1" />
            </div>
            <div class="c-flex-column c-pl20 c-flex-grow1 c-w0 c-pv4 c-justify-sb c-pb20" :class="index == examList.length - 1 ? '': 'c-bd-b1'">
              <div class="c-fs24 c-text-ellipsis2 c-hh100">{{item.name}}</div>
              <div class="c-flex-row c-aligni-center c-justify-sb">
                <div class="c-fs20 c-fc-gray" v-if="item.price && item.payType == 2">{{item.subscribers}}{{ !$isWxAppIos() ? '人已购买' : '人观看' }}</div>
                <div class="c-fs20 c-fc-gray" v-else>{{item.subscribers}}人测试</div>
                <div class="theme-fc c-fs24">
                  <span v-if="item.price && item.payType == 2">{{'￥' | iosPriceFilter}}</span>
                  <span v-if="item.payType != 3">{{item.price | moneyStr}}</span>
                  <span v-else-if="item.payType == 3">加密</span>
                </div>
              </div>
            </div>
          </div>
          <div class="c-pv20 c-textAlign-c c-fc-gray c-fs24" @click="getExamList()" v-if="dataStatus=='HAS_MORE_DATA'">
            加载更多&nbsp;>
          </div>
        </template>
        <template v-if="TrainList.length > 0">
          <div class="c-fs24 c-fc-xblack">相关训练营</div>
          <div class="c-flex-row c-pt20" @click="clickTrainItem(item.id)" v-for="(item,index) in TrainList" :key="index">
            <div class="c-ww210 c-hh140 c-text-hidden c-p c-br8">
              <img class="c-w100 imgCloseBig c-br8" :src="$addXossFilter(item.cover, require('../../../assets/defult270.png'))" />
              <img v-if="item.payType == 2 && item.svipDiscount==0 && item.vipDiscount!=0" src="@/assets/i/wap/course/svipfree5.png" alt="" class="c-pa c-p-t0 c-p-l0 c-ww60 c-pz1" />
              <img v-else-if="item.payType == 2 && item.vipDiscount==0" src="@/assets/i/wap/course/vipfree5.png" alt="" class="c-pa c-p-t0 c-p-l0 c-ww60 c-pz1" />
            </div>
            <div class="c-flex-column c-pl20 c-flex-grow1 c-w0 c-pv4 c-justify-sb c-pb20" :class="index == TrainList.length - 1 ? '': 'c-bd-b1'">
              <div class="c-fs24 c-text-ellipsis2 c-hh100">{{item.name}}</div>
              <div class="c-flex-row c-aligni-center c-justify-sb">
                <div class="c-fs20 c-fc-gray" v-if="item.price && item.payType == 2">{{item.people}}{{ !$isWxAppIos() ? '人已购买' : '人学习' }}</div>
                <div class="c-fs20 c-fc-gray" v-else>{{item.people}}人学习</div>
                <div class="theme-fc c-fs24">
                  <span v-if="item.price && (item.payType == 2||item.payType==4)">{{'￥' | iosPriceFilter}}</span>
                  <span v-if="item.payType != 3">{{item.price | moneyStr}}</span>
                  <span v-else-if="item.payType == 3">加密</span>
                </div>
              </div>
            </div>
          </div>
          <div class="c-pv20 c-textAlign-c c-fc-gray c-fs24" @click="getExamList()" v-if="trainDataStatus=='HAS_MORE_DATA'">
            加载更多&nbsp;>
          </div>
        </template>
        <template v-if="CourseList.length > 0">
          <div class="c-fs24 c-fc-xblack">相关课程</div>
          <div class="c-flex-row c-pt20" @click="clickCourseItem(item)" v-for="(item,index) in CourseList" :key="index">
            <div class="c-ww210 c-hh140 c-text-hidden c-p c-br8">
              <img class="c-w100 imgCloseBig c-br8" :src="$addXossFilter(item.avatar, require('../../../assets/defult270.png'))" />
              <img v-if="item.payType == 2 && item.svipDiscount==0 && item.vipDiscount!=0" src="@/assets/i/wap/course/svipfree5.png" alt="" class="c-pa c-p-t0 c-p-l0 c-ww60 c-pz1" />
              <img v-else-if="item.payType == 2 && item.vipDiscount==0" src="@/assets/i/wap/course/vipfree5.png" alt="" class="c-pa c-p-t0 c-p-l0 c-ww60 c-pz1" />
            </div>
            <div class="c-flex-column c-pl20 c-flex-grow1 c-w0 c-pv4 c-justify-sb c-pb20" :class="index == CourseList.length - 1 ? '': 'c-bd-b1'">
              <div class="c-fs24 c-text-ellipsis2 c-hh100">{{item.name}}</div>
              <div class="c-flex-row c-aligni-center c-justify-sb">
                <div class="c-fs20 c-fc-gray">{{item.plays}}人观看</div>
                <div class="theme-fc c-fs24" v-if="item.isSaleOnly==1">
                  <span v-if="item.price && item.payType == 2">{{'￥' | iosPriceFilter}}</span>
                  <span v-if="item.payType != 3">{{item.price | moneyStr}}</span>
                  <span v-else-if="item.payType == 3">加密</span>
                </div>
                <div v-else-if="item.isSaleOnly==0&&item.isSaleTogether==1" class="theme-fc c-fs24">关联售卖</div>
              </div>
            </div>
          </div>
          <div class="c-pv20 c-textAlign-c c-fc-gray c-fs24" @click="getRelateCourseList()" v-if="CourseListStatus=='HAS_MORE_DATA'">
            加载更多&nbsp;>
          </div>
        </template>
        <template v-if="ColumnList.length > 0">
          <div class="c-fs24 c-fc-xblack">相关专栏</div>
          <div class="c-flex-row c-pt20" @click="clickColumnItem(item)" v-for="(item,index) in ColumnList" :key="index">
            <div class="c-ww210 c-hh140 c-text-hidden c-p c-br8">
              <img class="c-w100 imgCloseBig c-br8" :src="$addXossFilter(item.avatar, require('../../../assets/defult270.png'))" />
              <img v-if="item.payType == 2 && item.svipDiscount==0 && item.vipDiscount!=0" src="@/assets/i/wap/course/svipfree5.png" alt="" class="c-pa c-p-t0 c-p-l0 c-ww60 c-pz1" />
              <img v-else-if="item.payType == 2 && item.vipDiscount==0" src="@/assets/i/wap/course/vipfree5.png" alt="" class="c-pa c-p-t0 c-p-l0 c-ww60 c-pz1" />
            </div>
            <div class="c-flex-column c-pl20 c-flex-grow1 c-w0 c-pv4 c-justify-sb c-pb20" :class="index == ColumnList.length - 1 ? '': 'c-bd-b1'">
              <div class="c-fs24 c-text-ellipsis2 c-hh100">{{item.name}}</div>
              <div class="c-flex-row c-aligni-center c-justify-sb">
                <div class="c-fs20 c-fc-gray" v-if="item.price && item.payType == 2">{{item.sales}}{{ !$isWxAppIos() ? '人已购买' : '人观看' }}</div>
                <div class="c-fs20 c-fc-gray" v-else>{{item.clicks}}人观看</div>
                <div class="theme-fc c-fs24" v-if="item.isSaleOnly==1">
                  <span v-if="item.price && item.payType == 2">{{'￥' | iosPriceFilter}}</span>
                  <span v-if="item.payType != 3">{{item.price | moneyStr}}</span>
                  <span v-else-if="item.payType == 3">加密</span>
                </div>
                <div v-else-if="item.isSaleOnly==0&&item.isSaleTogether==1" class="theme-fc c-fs24">关联售卖</div>
              </div>
            </div>
          </div>
          <div class="c-pv20 c-textAlign-c c-fc-gray c-fs24" @click="getRelateColumnList()" v-if="ColumnListStatus=='HAS_MORE_DATA'">
            加载更多&nbsp;>
          </div>
        </template>
        <loading-status-tem :noData="packageList.length == 0&&examList.length==0&&TrainList.length==0&&CourseList.length==0&&ColumnList.length==0" :noDataText="'暂无结果'"></loading-status-tem>
      </div>
    </div>
  </div>
</template>

<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import { utilJs } from "@/utils/common.js"
export default {
  name: "PackageList",
  components: {
    loadingStatusTem,
  },
  props: [],
  data() {
    return {
      packageList: [],
      examList:[],
      TrainList:[],
      CourseList:[],
      ColumnList:[],
      belongLoading:false,
      belongEximLoading:false,
      belongTrainLoading:false,
      CourseListLoading:false,
      ColumnListLoading:false,
      is_page_package: false,
      pagePackage:1,
      pageExim:1,
      pageTrain:1,
      pageCourse:1,
      dataStatus:'HAS_MORE_DATA',
      trainDataStatus:'HAS_MORE_DATA',
      CourseListStatus:'HAS_MORE_DATA',
      ColumnListStatus:'HAS_MORE_DATA',
      testId: '',
      companyAuth: localStorage.getItem("companyAuth") ? JSON.parse(localStorage.getItem("companyAuth")) : null,
    };
  },
  created() {
    utilJs.appShare(this);
  },
  activated() {

    setDocumentTitle("配套课程列表");// eslint-disable-line
    this.wechatShare();
  },
  deactivated() {
  },
  mounted() {
    this.testId = this.$route.query.testId;
    this.getRelatePackage(2);
    this.getExamList()
    this.getTrainList()
    this.getRelateCourseList()
    this.getRelateColumnList()
  },
  methods: {
    clickCourseItem(CourseItem) {
      let toPath = CourseItem.courseType == 1 ?
        `/homePage/course/voice?courseId=${CourseItem.courseId}&extId=-1&ckFrom=5` :
        CourseItem.courseType == 0 ?
        `/homePage/course/video?courseId=${CourseItem.courseId}&extId=-1&ckFrom=5` :
        `/homePage/course/imgText?courseId=${CourseItem.courseId}&extId=-1&ckFrom=5`
        ;
      this.$routerGo(this, "push", { path: toPath });
    },
    clickPackageItem(packageId) {
      this.$routerGo(this, "push", {
        path: "/homePage/package/packageDetail",
        query: { combosId: packageId }
      });
    },
    clickExaminationItem(examinationNo) {
      this.$routerGo(this, "push", {
        path: "/homePage/examination/examinationDetail",
        query: { ExaminationNo: examinationNo }
      });
    },
    clickTrainItem(subId) {
      this.$routerGo(this, "push", {
        path: "/homePage/camp/campDetail",
        query: {
          campId: subId,
          ckFrom: global.ckFrom.camp
        }
      });
    },
    clickColumnItem(ColumnItem) {
      this.$routerGo(this, "push", {
        path: "/homePage/column/columnDetail",
        query: { cId:-1, ckFrom:global.ckFrom.column, extId: ColumnItem.columnId }
      });
    },
    getRelatePackage(tabType) {
      if (!this.belongLoading) {
        this.belongLoading = true;
        let $this = this;
        if (tabType == 2) {
          let getUrl = `${global.apiurl}combos/showAll?`;
          utilJs.getMethod(getUrl + 'proType=13&proId=' + $this.testId + '&page=' + this.pagePackage + '&limit=10' + '&tabType=' + tabType, function (res) {
            $this.belongLoading = false;
            $this.packageList = $this.packageList.concat(res.list.combos.data);
            if ($this.pagePackage == 1) { //从课程刚进来页面的时候需要获取专栏列表，第二页开始不需要了
              $this.packageList = res.list.combos.data;
            }
            $this.pagePackage = res.list.combos.current_page < res.list.combos.last_page ? ($this.pagePackage + 1) : $this.pagePackage;
            $this.is_page_package = res.list.combos.current_page < res.list.combos.last_page ? true : false;
          }, failRes => {
            $this.belongLoading = false;
          });
        }
      }
    },
    getExamList() {
      let $this = this;
      if (!this.belongEximLoading) {
        utilJs.getMethod(`${global.apiurl}paper/relateTopicList/` + $this.testId + '?page=' + this.pageExim + '&limit=10', function (res) {
          $this.belongEximLoading = false;
          $this.examList = $this.examList.concat(res.data);
          if ($this.pageExim == 1) {
              $this.examList = res.data;
            } else {
              $this.examList = [...$this.examList, ...res.data];
            }
            if (res.data && (res.data.length < 10)) {
              $this.dataStatus = $this.pageExim == 1 && res.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
            } else {
              $this.dataStatus = 'HAS_MORE_DATA';
              $this.pageExim++;
            }
            $this.belongEximLoading = false;
        }, failRes => {
          $this.belongEximLoading = false;
        });
      }
    },
    getTrainList() {
      let $this = this;
      if (!this.belongTrainLoading) {
        utilJs.getMethod(`${global.apiurl}paper/relateTrainList/` + $this.testId + '?page=' + this.pageTrain + '&limit=10&prodType=' + global.ckFrom.testpPaper, function (res) {
          $this.belongTrainLoading = false;
          $this.TrainList = $this.TrainList.concat(res.data);
          if ($this.pageTrain == 1) {
              $this.TrainList = res.data;
            } else {
              $this.TrainList = [...$this.TrainList, ...res.data];
            }
            if (res.data && (res.data.length < 10)) {
              $this.trainDataStatus = $this.pageTrain == 1 && res.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
            } else {
              $this.trainDataStatus = 'HAS_MORE_DATA';
              $this.pageTrain++;
            }
            $this.belongTrainLoading = false;
        }, failRes => {
          $this.belongTrainLoading = false;
        });
      }
    },
    getRelateCourseList() {
      let $this = this;
      if (!this.CourseListLoading) {
        utilJs.getMethod(`${global.apiurl}paper/relateCourseList/` + $this.testId + '?page=' + this.pageCourse + '&limit=10&prodType=' + global.ckFrom.testpPaper, function (res) {
          $this.CourseListLoading = false;
          $this.CourseList = $this.CourseList.concat(res.data);
          if ($this.pageCourse == 1) {
              $this.CourseList = res.data;
            } else {
              $this.CourseList = [...$this.CourseList, ...res.data];
            }
            if (res.data && (res.data.length < 10)) {
              $this.CourseListStatus = $this.pageCourse == 1 && res.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
            } else {
              $this.CourseListStatus = 'HAS_MORE_DATA';
              $this.pageCourse++;
            }
            $this.CourseListLoading = false;
        }, failRes => {
          $this.CourseListLoading = false;
        });
      }
    },
    getRelateColumnList() {
      let $this = this;
      if (!this.ColumnListLoading) {
        utilJs.getMethod(`${global.apiurl}paper/relateColumnList/` + $this.testId + '?page=' + this.pageCourse + '&limit=10&prodType=' + global.ckFrom.testpPaper, function (res) {
          $this.ColumnListLoading = false;
          $this.ColumnList = $this.ColumnList.concat(res.data);
          if ($this.pageCourse == 1) {
              $this.ColumnList = res.data;
            } else {
              $this.ColumnList = [...$this.ColumnList, ...res.data];
            }
            if (res.data && (res.data.length < 10)) {
              $this.ColumnListStatus = $this.pageCourse == 1 && res.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
            } else {
              $this.ColumnListStatus = 'HAS_MORE_DATA';
              $this.pageCourse++;
            }
            $this.ColumnListLoading = false;
        }, failRes => {
          $this.ColumnListLoading = false;
        });
      }
    },
    //分享
    wechatShare: function () {
      let title = "配套课程列表"
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`
      utilJs.wechatConfig(shareUrl, title, "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      let title = "配套课程列表"
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`
      utilJs.appShareTrue(title, "", shareUrl, "");
    },
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
</style>


